<template>
    <div>
        <div v-if="(havedistribute === true && firsthavebescored===false)||havedistribute===false">
            初审还未评审完
        </div>
        <div v-if="! ((havedistribute === true && firsthavebescored===false)||havedistribute===false)">
            <el-row class="distribution_row">
                <el-col :span="12">
                    <div class="grid-content bg-purple">
            
                        <div  id="classChart" :style="{width: '500px', height: '400px'}"></div>
            
                    </div>
                </el-col>
                <el-col :span="12">
                    <div  class="grid-content bg-purple-light">
                        进入终审作品排名
                        <el-card shadow="hover" style="width: 100%;">
                            <el-table :data="tableData" style="width: 100%" height="300" border>
                                <el-table-column fixed type="index" width="50">
                                </el-table-column>
                                <el-table-column prop="prjConid" label="参赛者Id" width="150">
                                </el-table-column>
                                <el-table-column prop="prjRealname" label="真实作品名" width="120">
                                </el-table-column>
                                <el-table-column prop="prjUrl" label="作品链接" width="60">
                                    <template slot-scope="scope">
                                        <el-link :href="scope.row.prjUrl">下载文件</el-link>
            
                                    </template>
                                </el-table-column>
                                <el-table-column prop="prjScore" label="得分" width="120">
                                </el-table-column>
            
                            </el-table>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            
            <el-tooltip placement="top" >
                <div slot="content" style="font-size: 18px;">
                    <p>为每个作品随机分配五个评审专家进行终审</p>
                    <p v-if="!havedistribute">还未分配</p>
                    <p v-if="havedistribute">已经分配过了</p>
                    分配时间在: <span
                        style="color: #409EFF;font-size:20px;font-weight:500;font-family:PingFang SC;">{{startFirstScoringTime}}~{{endFirstScoringTime}}</span>
                </div>
                <el-button type="primary" :disabled="buttonValid" @click="distributionFinal" style="width: 50%;">终审分配专家</el-button>
            </el-tooltip>
        </div>
        

    </div>
</template>

<script lang="js">

    export default {

        data() {
            return {
                haveupload_count: NaN,
                notupload_count: NaN,
                startFirstScoringTime: "2024-5-8 23:30:00",
                endFirstScoringTime: "2024-5-30 23:55:00",
                DistributionValid: false,
                firsthavebescored:false,
                havedistribute: false,
                buttonValid: false,
                
                tableData:[],
                classcount: [],
                deadline2: new Date("2024-5-30 23:55:00"),
                deadline1: new Date("2024-5-8 23:30:00")
            };
        },
        methods: {
            async fetchData() {
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/secondscoring/isEmpty",

                }).then(res => {
                    if (res.data.data === 0) {
                        this.havedistribute = false;
                    } else {
                        console.log(res.data.data);
                        this.havedistribute = true;
                    }
                })
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/firstscoring/scoreIsNull",

                }).then(res => {
                    if (res.data.data === 0) {
                        this.firsthavebescored = true;
                    }
                })

            },
            async draw() {
                let myChart = this.$echarts.init(document.getElementById('classChart'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '终审作品类别统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '类别',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 30,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [],
                        }
                    ]
                })

                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/contestants/passfirstprj_groupByclass",
                }).then(res => {
                    if (res.data.code == 1) {
                        this.classcount = res.data.data;
                        console.log(this.classcount);

                        myChart.setOption({
                            series: [
                                {
                                    name: '类别',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    avoidLabelOverlap: false,
                                    itemStyle: {
                                        borderRadius: 10,
                                        borderColor: '#fff',
                                        borderWidth: 2
                                    },
                                    label: {
                                        show: false,
                                        position: 'center'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: 30,
                                            fontWeight: 'bold'
                                        }
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    data: this.classcount,
                                }
                            ]
                        })

                    }

                })

                //防止越界，重绘canvas，解决掉屏幕缩小，图表不会随之适应的缩小的方法
                window.onresize = myChart.resize;

            },
            async passfirstPrj() {
                await this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/project/passfirstPrj",
                }).then(res => {
                    if (res.data.data !=null) {
                        this.tableData = res.data.data
                    }

                })
            },
            getTime() {
                var nowTime = Date.parse(new Date());
                return nowTime;
            },
            ValidDateStage() {
                var newDate = this.getTime();

                var startTime = Date.parse(new Date(this.startFirstScoringTime));
                var endTime = Date.parse(new Date(this.endFirstScoringTime));
                if (newDate > startTime && newDate < endTime) {
                    this.DistributionValid = true
                } else {
                    this.DistributionValid = false
                }

            },
            buttonisvalid() {
                console.log(this.DistributionValid);
                console.log(this.havedistribute);

                if (this.DistributionValid === true && this.havedistribute === false) {
                    this.buttonValid = false;
                } else {
                    this.buttonValid = true;
                }
                console.log(this.buttonValid);
            },
            distributionFinal() {
                this.$axios({
                    method: 'post',
                    url: "http://localhost:8080/firstscoring/distributionfinal"
                }).then(res => {
                    if (res.data.code == 1) {
                        this.$message.success("分配成功");
                        window.location.reload();
                        this.fetchData();
                        this.ValidDateStage();
                        this.buttonisvalid();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })

            }


        },
        async mounted() {
            try {
                await this.fetchData();
                await this.passfirstPrj();
                this.ValidDateStage();
                this.buttonisvalid();
                await this.draw();
            } catch (error) {
                console.log('Error During mount:', error)
            }

        },
    }
</script>
<style>
    .distribution_row {
        display: flex;
        align-items: stretch;
        margin-top: 5%;
    }

    .el-statistic .con {
        margin-top: 10px !important;
        color: #f33f3f !important;
    }

    .el-statistic .con .number {
        font-size: 22px !important;

    }

    .el-statistic .con .suffix {
        font-size: 20px !important;

    }

    .el-statistic .head .title {
        margin-bottom: 8px !important;
        color: #606266 !important;
        font-size: 16px !important;
    }
</style>